<template>
  <view>
    <view class="user">
      <view class="header acea-row row-between-wrapper">
        <view class="picTxt acea-row row-between-wrapper" @tap="goLogin">
          <view class="pictrue">
            <image :src="userInfo.avatarUrl"></image>
          </view>
          <view class="text">
            <view class="acea-row row-middle">
              <view class="name line1">{{ userInfo.nickName || '请授权' }}</view>
            </view>
            <!-- <view class="id">用户编号：1000{{ userInfo.userId || 0 }}</view> -->
          </view>
        </view>
        <!-- <text class="iconfont icon-shezhi" @tap="goPages" data-url="/pages/ucenter/user/user"></text> -->
        <view class="icon-location" @tap="goPages" data-url="/pages/ucenter/address/address">
          <image src="/static/images/icon.location.png"></image>
          <text>地址管理</text>
        </view>
      </view>
      <view class="wrapper">
        <!-- <view class="nav acea-row row-middle">
					<view class="item" hover-class="none" v-if="userInfo.userLevel == 2" @tap="goBrokerage">
						<view class="title">可提佣金</view>
						<view class="text"><text class="iconfont icon-jinbi1" style="color: #ff654b; margin-right: 8rpx"></text> {{ remainAmount || 0.0 }}</view>
					</view>
					<view class="item" hover-class="none" v-else>
						<view class="title">用户类型</view>
						<view class="text"><text class="iconfont icon-jingyanzhi" style="color: #ff654b; margin-right: 8rpx"></text> {{ userInfo.userLevelDesc || '普通会员' }}</view>
					</view>
					<view class="item" hover-class="none" v-if="userInfo.userLevel == 2" @tap="goBrokerage">
						<view class="title">总收益</view>
						<view class="text"><text class="iconfont icon-qiandai" style="color: #ff654b; margin-right: 8rpx"></text> {{ totalAmount || 0 }}</view>
					</view>
					<view class="item" hover-class="none" v-else>
						<view class="title">注册时间</view>
						<view class="text"><text class="iconfont icon-shenhezhong" style="color: #ff654b; margin-right: 8rpx"></text>{{ userInfo.registerDate || '2019-10-01' }}</view>
					</view>
					<view class="item" hover-class="none" @tap="goPages" data-url="/pages/ucenter/couponList/couponList">
						<view class="title">优惠券</view>
						<view class="text"><text class="iconfont icon-youhuiquan" style="color: #ff654b; margin-right: 8rpx"></text>{{ couponCount || 0 }}</view>
					</view>
				</view> -->
        <view class="myOrder">
          <view class="title acea-row row-between-wrapper">
            <view class="jhx_f4">我的订单</view>
            <view class="allOrder jhx_f6" hover-class="none" @tap="goOrder"
              >全部订单<text class="iconfont icon-jiantou"></text
            ></view>
          </view>
          <view class="orderState acea-row row-middle">
            <view
              class="item"
              hover-class="none"
              @tap="goOrderIndex"
              data-index="1"
              data-route="/pages/ucenter/order/order"
            >
              <view class="pictrue">
                <text class="item_badge" v-if="order.unpaid">{{ order.unpaid }}</text>
                <image src="/static/images/user.home.1.png"></image>
              </view>
              <view class="jhx_f2">待付款</view>
            </view>
            <view
              class="item"
              hover-class="none"
              @tap="goOrderIndex"
              data-index="2"
              data-route="/pages/ucenter/order/order"
            >
              <view class="pictrue">
                <text class="item_badge" v-if="order.unship">{{ order.unship }}</text>
                <image src="/static/images/user.home.2.png"></image>
              </view>
              <view class="jhx_f2">待发货</view>
            </view>
            <view
              class="item"
              hover-class="none"
              @tap="goOrderIndex"
              data-index="3"
              data-route="/pages/ucenter/order/order"
            >
              <view class="pictrue">
                <text class="item_badge" v-if="order.unrecv">{{ order.unrecv }}</text>
                <image src="/static/images/user.home.3.png"></image>
              </view>
              <view class="jhx_f2">待收货</view>
            </view>
            <view
              class="item"
              hover-class="none"
              @tap="goOrderIndex"
              data-index="4"
              data-route="/pages/ucenter/order/order"
            >
              <view class="pictrue">
                <text class="item_badge" v-if="order.uncomment">{{ order.uncomment }}</text>
                <image src="/static/images/user.home.4.png"></image>
              </view>
              <view class="jhx_f2">待评价</view>
            </view>
            <view
              class="item"
              hover-class="none"
              @tap="goOrderIndex"
              data-index="5"
              data-route="/pages/ucenter/order/order"
            >
              <view class="pictrue">
                <text class="item_badge" v-if="order.refound">{{ order.refound }}</text>
                <image src="/static/images/user.home.5.png"></image>
              </view>
              <view class="jhx_f2">退款/售后</view>
            </view>
            <!-- <view class="item" hover-class="none" @tap="goOrder">
							<view class="pictrue"><image src="/static/static/images/sh.png"></image></view>
							<view class="jhx_f2">所有订单</view>
						</view> -->
          </view>
        </view>
        <!-- <view class="myService">
					<view class="title acea-row row-middle jhx_f4">我的服务</view>
					<view class="serviceList acea-row row-middle">
						<block v-for="(item, index) in MyMenus" :key="index">
							<view class="item" @tap="goPages" :data-url="item.url" v-if="item.url != '#'">
								<view class="pictrue"><image :src="'/static/static/images/' + item.pic"></image></view>
								<view class="jhx_f2">{{ item.name }}</view>
							</view>
						</block>
						<button class="item" open-type="contact" hover-class="none">
							<view class="pictrue"><image src="/static/static/images/customer.png"></image></view>
							<view class="jhx_f2">联系客服</view>
						</button>
					</view>
				</view> -->
      </view>
    </view>
    <!-- <authorize @onLoadFun="onLoadFun"></authorize> -->
  </view>
</template>

<script>
const util = require('../../../utils/util.js')
const api = require('../../../config/api.js')
const user = require('../../../utils/user.js')
const app = getApp()

export default {
  data() {
    return {
      userInfo: {
        nickName: '点击登录',
        avatarUrl: '/static/static/images/avatar.png',
      },
      order: {
        unpaid: 0,
        unship: 0,
        unrecv: 0,
        uncomment: 0,
        refound: 0,
      },
      MyMenus: [
        /* {
					url: '/pages/ucenter/collect/collect',
					pic: 'icon_collect.png',
					name: '商品收藏',
				},
				{
					url: '/pages/ucenter/footprint/footprint',
					pic: 'footprint.png',
					name: '浏览足迹',
				},
				{
					url: '/pages/groupon/myGroupon/myGroupon',
					pic: 'group.png',
					name: '我的拼团',
				}, */
        {
          url: '/pages/ucenter/address/address',
          pic: 'address.png',
          name: '地址管理',
        } /* ,
				{
					url: '/pages/ucenter/feedback/feedback',
					pic: 'feedback.png',
					name: '意见反馈',
				},
				{
					url: '/pages/ucenter/myGiftOrder/myGiftOrder',
					pic: 'share.png',
					name: '我的赠送单',
				},
				{
					url: '/pages/about/about',
					pic: 'about_us.png',
					name: '关于我们',
				}, */, // *,{ url: "/pages/about/about", pic: "comment.png", name: "使用帮助" }
      ],
      hasLogin: false,
      totalAmount: 0.0,
      remainAmount: '',
      couponCount: '',
    }
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {},
  onShow: function() {
    //获取用户的登录信息
    if (app.globalData.hasLogin) {
      let userInfo = uni.getStorageSync('userInfo')
      this.setData({
        userInfo: userInfo,
        hasLogin: true,
      })

      let that = this
      util.request(api.UserIndex).then(function(res) {
        if (res.errno === 0) {
          res.data.order.refound = res.data.order.refound || 0

          that.setData({
            order: res.data.order,
            totalAmount: res.data.totalAmount,
            remainAmount: res.data.remainAmount,
            couponCount: res.data.couponCount,
          })
        }
      })
    }

    let wx = window.wxSDK

    wx.ready(() => {
      let topic = uni.getStorageSync('topic')
      let ids = topic.id || 41
      let title = topic.subtitle || '泽超新福礼'
      let desc = topic.content || '快来参与吧！'
      let img = topic.picUrl || window.location.origin + 'logo.jpg'
      let link = window.location.origin + '?myId=' + ids

      wx.updateAppMessageShareData({
        title: title,
        desc: desc,
        link: link,
        imgUrl: img,
        success: () => {},
      })
      wx.updateTimelineShareData({
        title: title,
        link: link,
        imgUrl: img,
        success: () => {},
      })
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {},
  methods: {
    on_Show() {
      //获取用户的登录信息
      if (app.globalData.hasLogin) {
        let userInfo = uni.getStorageSync('userInfo')
        this.setData({
          userInfo: userInfo,
          hasLogin: true,
        })

        let that = this
        util.request(api.UserIndex).then(function(res) {
          if (res.errno === 0) {
            that.setData({
              order: res.data.order,
              totalAmount: res.data.totalAmount,
              remainAmount: res.data.remainAmount,
              couponCount: res.data.couponCount,
            })
          }
        })
      }
    },
    /**
     * 页面跳转
     */
    goPages: function(e) {
      if (this.hasLogin) {
        uni.navigateTo({
          url: e.currentTarget.dataset.url,
        })
      } else {
        uni.navigateTo({
          url: '/pages/auth/login/login',
        })
      }
    },

    goLogin() {
      if (!this.hasLogin) {
        uni.navigateTo({
          url: '/pages/auth/login/login',
        })
      }
    },

    goBrokerage() {
      if (this.hasLogin) {
        uni.navigateTo({
          url: '/pages/brokerage/main/main',
        })
      } else {
        uni.navigateTo({
          url: '/pages/auth/login/login',
        })
      }
    },

    goOrder() {
      if (this.hasLogin) {
        try {
          uni.setStorageSync('tab', '0')
        } catch (e) {}

        uni.navigateTo({
          url: '/pages/ucenter/order/order',
        })
      } else {
        uni.navigateTo({
          url: '/pages/auth/login/login',
        })
      }
    },

    goOrderIndex(e) {
      if (this.hasLogin) {
        let tab = e.currentTarget.dataset.index
        let route = e.currentTarget.dataset.route

        try {
          uni.setStorageSync('tab', tab)
        } catch (e) {}

        uni.navigateTo({
          url: route,
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      } else {
        uni.navigateTo({
          url: '/pages/auth/login/login',
        })
      }
    },

    goAfterSale: function() {
      uni.showToast({
        title: '目前不支持',
        icon: 'none',
        duration: 2000,
      })
    },

    onLoadFun() {
      console.log('占位：函数 onLoadFun 未声明')
    },
  },
}
</script>
<style>
.user .header {
  padding: 50rpx 30rpx 30rpx;
  height: 230rpx;
  position: relative;
  background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
}
.user .header:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -80rpx;
  z-index: 0;
  content: '';
  height: 80rpx;
  width: 100%;
  background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
}
.user .header .picTxt .pictrue {
  width: 100rpx;
  height: 100rpx;
}
.user .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #f5f5f5;
}
.user .header .picTxt .text {
  width: 360rpx;
  color: rgba(255, 255, 255, 1);
  margin-left: 20rpx;
}
.user .header .picTxt .text .name {
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  max-width: 470rpx;
}
.user .header .picTxt .text .member {
  padding: 0 10rpx;
  height: 36rpx;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 20rpx;
  border-radius: 30rpx;
  margin-left: 17rpx;
}
.user .header .picTxt .text .member image {
  width: 22rpx;
  height: 22rpx;
  font-size: 20rpx;
  margin-right: 8rpx;
}
.user .header .picTxt .text .id {
  color: rgba(255, 255, 255, 0.6);
  font-size: 26rpx;
  margin-top: 15rpx;
}
.user .header .picTxt .text .id .iconfont {
  font-size: 30rpx;
  margin-left: 12rpx;
}
.user .header .icon-dizhi {
  font-size: 24rpx;
  color: #fff;
  margin-top: 15rpx;
  margin-right: 15rpx;
}
.user .wrapper {
  padding: 0 30rpx;
  position: relative;
  z-index: 1;
}
.user .wrapper .nav {
  background-color: #fff;
  border-radius: 20rpx;
  height: 140rpx;
}
.user .wrapper .nav .item {
  flex: 1;
  text-align: center;
}
.user .wrapper .nav .item ~ .item {
  border-left: 1px solid #eee;
}
.user .wrapper .nav .item .title {
  font-size: 28rpx;
  color: #666;
}
.user .wrapper .nav .item .num {
  margin-top: 16rpx;
  font-size: 36rpx;
  color: rgb(223, 8, 8);
}
.user .wrapper .nav .item .text {
  margin-top: 16rpx;
  font-size: 30rpx;
}
.user .wrapper .myOrder {
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  padding-top: 30rpx;
}
.user .wrapper .myOrder .title,
.user .wrapper .myService .title {
  height: 88rpx;
  padding: 0 30rpx;
  /* border-bottom: 1px dashed #ddd; */
  font-size: 30rpx;
  color: #282828;
}
.user .wrapper .myOrder .title .allOrder {
  font-size: 24rpx;
  color: #898b8d;
}
.user .wrapper .myOrder .title .allOrder .iconfont {
  font-size: 25rpx;
  margin-left: 7rpx;
  color: #898b8d;
}
.user .wrapper .myOrder .orderState {
  /* height: 160rpx; */
  padding: 20rpx 20rpx 50rpx;
}
.user .wrapper .myOrder .orderState .item {
  font-size: 26rpx;
  color: #454545;
  flex: 1;
  text-align: center;
}
.user .wrapper .myOrder .orderState .item .pictrue {
  width: 70rpx;
  height: 70rpx;
  margin: 0 auto 10rpx;
}
.user .wrapper .myOrder .orderState .item .pictrue image {
  width: 100%;
  height: 100%;
}

.user .wrapper .myOrder .orderState .item .jhx_f2 {
  color: #898b8d;
}

.user .wrapper .myService {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 10rpx;
}
.user .wrapper .myService .serviceList {
  padding: 8rpx 0 27rpx 0;
}
.user .wrapper .myService .serviceList .item {
  width: 25%;
  text-align: center;
  font-size: 26rpx;
  color: #333;
  margin-top: 30rpx;
}
.user .wrapper .myService .serviceList .item .pictrue {
  width: 64rpx;
  height: 64rpx;
  margin: 0 auto 16rpx auto;
}
.user .wrapper .myService .serviceList .item .pictrue image {
  width: 100%;
  height: 100%;
}
.user .support {
  width: 219rpx;
  height: 74rpx;
  margin: 54rpx auto;
  display: block;
}
.item_badge {
  height: 32rpx;
  min-width: 32rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  position: absolute;
  z-index: 2;
  background: #ff742a;
  color: #fff;
  font-size: 20rpx;
  border-radius: 16rpx;
  line-height: 32rpx;
  margin-top: 0;
  margin-left: 50rpx;
}

.icon-location {
  text-decoration: none;
  font-size: 24rpx;
}

.icon-location image {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin: 0 auto 5rpx;
}

.icon-location uni-text {
  font-size: 24rpx;
  color: #fff;
}
</style>
